<template>
  <div class="leftChart">
    <div class="echart" v-if="!isSubordinate">
      <div class="echartBody">
        <div class="echartTit">
          <img src="../assets/images/point.png" alt="" /> 特殊人员汇总
        </div>
        <img class="Divider" src="../assets/images/Divider.png" />
        <div class="echartContDiv">
          <div
            class="echartContfor"
            v-for="(item, index) in dataList"
            :key="index"
          >
            <div class="echartCont">
              <div class="echartText">{{ item.zpHouseholdDangerType }}</div>
              <div class="percentage">
                <el-progress :percentage="item.percentage">
                  <div class="percentageText">{{ item.count }}</div>
                </el-progress>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="iconClose">
        <div class="leftIcon" @click="toClose">
          <img src="../assets/images/iconClose.png" alt="" />
        </div>
      </div>
    </div>
    <div class="echartShow" v-if="isSubordinate">
      <div class="echartBody">
        <div class="echartTit">
          <div>
            <img src="../assets/images/point.png" alt="" /> 特殊人员汇总
          </div>
        </div>
        <img class="Divider" src="../assets/images/Divider.png" />
        <div class="echartContDiv">
          <div
            class="echartContfor"
            v-for="(item, index) in dataList"
            :key="index"
          >
            <div class="echartCont" @click="toLinght(item)">
              <div class="echartText">{{ item.zpHouseholdDangerType }}</div>
              <div class="percentage">
                <el-progress :percentage="item.percentage">
                  <div class="percentageText">{{ item.count }}</div>
                </el-progress>
              </div>
            </div>
            <div class="dataEdit" v-if="item.id === selectedId">
              <el-button
                icon="el-icon-close"
                circle
                @click="closeWindows(item)"
              ></el-button>
            </div>
          </div>
        </div>
        <img class="Divider" src="../assets/images/Divider.png" />
        <div class="bindingBtn" @click="toBinding">
          <div>户籍数据绑定</div>
        </div>
      </div>
      <div class="iconClose">
        <div class="leftIcon" @click="toClose">
          <img src="../assets/images/iconClose.png" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "leftEchart",
  components: {},
  props: {
    isSubordinate: {
      type: Boolean,
      default: false,
    },
    buildId: {
      type: String,
      default: "null",
    },
  },
  data() {
    return {
      dataList: {},
      selectedId: null,
    };
  },
  created() {},
  mounted() {
    if (this.buildId != "null") {
      this.getOneData();
    } else {
      this.processing();
    }
  },
  methods: {
    getOneData() {
      this.$axios
        .getOneDanger({
          buildName: this.buildId,
        })
        .then((res) => {
          console.log(res.data.length);
          if (res.code == 200) {
            this.dataList = res.data;
            let maxdata = Math.max.apply(
              Math,
              this.dataList.map((item) => {
                return item.count;
              })
            );
            this.dataList.forEach((item, index) => {
              item.buildId = this.buildId;
              item.id = index;
              item.percentage = ((item.count / maxdata) * 100).toFixed(2);
            });
          }
        });
    },
    //数据处理
    processing() {
      this.$axios.getDangerType().then((res) => {
        if (res.code == 200) {
          this.dataList = res.data;
          let maxdata = Math.max.apply(
            Math,
            this.dataList.map((item) => {
              return item.count;
            })
          );
          this.dataList.forEach((item, index) => {
            item.buildId = this.buildId;
            item.id = index;
            item.percentage = ((item.count / maxdata) * 100).toFixed(2);
          });
        }
      });
    },
    toClose() {
      this.$emit("toClose", false);
    },
    toBinding() {
      this.$emit("isbinding", true);
    },
    toLinght(item) {
      this.selectedId = item.id;
      this.$emit("getWindows", item);
    },
    closeWindows() {
      this.selectedId = null;
      this.$emit("closeWindows", false);
    },
  },
};
</script>
<style lang="scss" scoped>
.el-button.is-circle {
  font-size: 14px !important;
  padding: 2px !important;
}
.el-button {
  min-height: 0px;
}
.leftChart {
  width: 463px;
  z-index: 9;
  position: absolute;
  // top: 236px;
  // background: rgba(255, 255, 255, 0.7);
  border-radius: 5px;
}
.echart {
  width: 463px;
  height: 665px;
  background: url("../assets/images/leftClose.png");
  background-repeat: no-repeat;
  color: #fff;
  display: flex;
  align-items: center;
  .echartBody {
    width: 440px;
    height: 665px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    // background: -webkit-linear-gradient(
    //   top,
    //   rgba(123, 167, 190, 0.9),
    //   rgba(13, 37, 59, 0.9)
    // );
    .Divider {
      width: 400px;
      height: 3px;
      // margin-top: -10px;
      // margin-bottom: 20px;
    }
    .echartTit {
      text-align: left;
      width: 100%;
      font-size: 22px;
      font-weight: 400;
      line-height: 29px;
      padding: 24px 20px;
    }
    .echartContDiv {
      height: 583px;
      // display: flex;
      flex: 1;
      flex-wrap: wrap;
      align-items: center;
      margin-left: 30px;
    }
    .echartContfor {
      height: 48px;
      display: flex;
      align-items: center;
    }
    .echartCont {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 40px;
      .echartText {
        text-align: left;
        width: 150px;
      }
      .percentage {
        width: 250px;
        .percentageText {
          color: #fff;
        }
      }
    }
  }
  .leftIcon {
    position: relative;
    left: -6px;
    top: 10px;
  }
  .iconClose {
    width: 23px;
    height: 40px;
    cursor: pointer;
  }
}
.echartShow {
  width: 463px;
  height: 765px;
  background: url("../assets/images/leftClose1.png");
  background-repeat: no-repeat;
  color: #fff;
  display: flex;
  align-items: center;
  .echartBody {
    width: 440px;
    height: 665px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    position: absolute;
    top: 0;
    .Divider {
      width: 400px;
      height: 3px;
      // margin-top: -10px;
      // margin-bottom: 20px;
    }
    .echartTit {
      text-align: left;
      width: 100%;
      font-size: 22px;
      font-weight: 400;
      line-height: 29px;
      padding: 24px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .echartContDiv {
      height: 600px;
      // display: flex;
      flex: 1;
      flex-wrap: wrap;
      align-items: center;
      margin-left: 30px;
    }
    .echartContfor {
      height: 50px;
      display: flex;
      align-items: center;
    }
    .echartCont {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 40px;
      cursor: pointer;
      .echartText {
        text-align: left;
        width: 150px;
      }
      .percentage {
        width: 230px;
        .percentageText {
          color: #fff;
        }
      }
    }
  }
  .leftIcon {
    position: relative;
    left: -6px;
    top: 10px;
  }
  .iconClose {
    width: 23px;
    height: 40px;
    cursor: pointer;
    position: absolute;
    right: 0;
  }
}
.bindingBtn {
  color: #62edff;
  width: 180px;
  height: 41px;
  background: rgba(5, 30, 50, 0.65);
  border: 1px solid #62edff;
  opacity: 1;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  margin: 20px 0;
}
</style>
